import React, { useState, useEffect, forwardRef } from 'react';
import { Button, Upload, Form, Input, message } from 'antd';
import type { UploadProps, FormProps } from 'antd'

import {
  InboxOutlined,
} from '@ant-design/icons';

import { getSessionStorageInfo } from '../utils/localStorageInfo';

const { Dragger } = Upload;
const { TextArea } = Input;

export default forwardRef((props, ref) => {

  let bsinFileUploadUrl = process.env.bsinFileUploadUrl;
  let tenantAppType = process.env.tenantAppType;

  // 获取表单
  const [formRef] = Form.useForm();

  useEffect(() => {

  }, []);

  type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
  };

  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  // 上传封面图片
  const uploadProps: UploadProps = {
    name: 'file',
    headers: {
      Authorization: getSessionStorageInfo('token')?.token,
    },
    action: bsinFileUploadUrl,
    data: {
      // currentPath: 'fileNo', //为空则使用CustomerNo作为文件夹
      tenantAppType: tenantAppType,
      thumbnailSize: '200,200', //缩略图尺寸，为空则无缩略图
      // imgSize: '200,200', //存储尺寸，为空则原图尺寸储存
    },
    // 只能上传一个
    maxCount: 1,
    onChange(info) {
      // 控制path是否显示
      console.log(info);
      // 是加载
      let { file } = info;
      if (file?.status === 'done') {
        console.log(file.response);
        message.success(`${info.file.name} file uploaded successfully.`);
        formRef.setFieldValue('coverImage', file?.response.data.url);
      } else if (file?.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    // 拖拽
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
    onRemove(e) { },
  };

  return (
    <>
      <div style={{ width: "500px", margin: "0 auto" }}>
        <Form
          name="basic"
          form={formRef}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          style={{ maxWidth: 600, paddingTop: 40, textAlign: 'center' }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="名称"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label="头像" name="coverImage">
            <Dragger {...uploadProps} listType="picture">
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">点击上传封面</p>
            </Dragger>
          </Form.Item>

          <Form.Item<FieldType>
            label="人设"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <TextArea rows={4} placeholder="maxLength is 6" maxLength={6} />
          </Form.Item>
          <Form.Item<FieldType>
            label="描述"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <TextArea rows={4} placeholder="maxLength is 6" maxLength={6} />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </div>
    </>
  );
});
